<template>
  <div>
    <h1>【aty-alert】 component demo</h1>
    <p>【aty-alert】 本质</p>
    <aty-row class="fd-alert-box">
      <aty-row>
        <aty-title level="4">1.【aty-alert】 基础</aty-title>
        <aty-panel>基本使用方法，有四种样式可以选择info、success、warning、error。</aty-panel>
        <aty-alert>An info prompt</aty-alert>
        <aty-alert type="success">A success prompt</aty-alert>
        <aty-alert type="warning">A warning prompt</aty-alert>
        <aty-alert type="error">An error prompt</aty-alert>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-alert】 自定义slot name="desc"描述内容。</aty-title>
        <aty-alert>An info prompt
          <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
        </aty-alert>
        <aty-alert type="success">A success prompt
          <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
        </aty-alert>
        <aty-alert type="warning">A warning prompt
          <template slot="desc">
            Content of prompt. Content of prompt. Content of prompt.
          </template>
        </aty-alert>
        <aty-alert type="error">An error prompt
          <span slot="desc">
            Custom error description copywriting. <aty-icon type="help-circled" size="14" />
          </span>
        </aty-alert>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-alert】 显示图标</aty-title>
        <aty-alert show-icon>An info prompt</aty-alert>
        <aty-alert type="success" show-icon>A success prompt</aty-alert>
        <aty-alert type="warning" show-icon>A warning prompt</aty-alert>
        <aty-alert type="error" show-icon>An error prompt</aty-alert>
        <aty-alert show-icon>An info prompt
          <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
        </aty-alert>
        <aty-alert type="success" show-icon>A success prompt
          <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
        </aty-alert>
        <aty-alert type="warning" show-icon>A warning prompt
          <template slot="desc">
            Content of prompt. Content of prompt. Content of prompt.
          </template>
        </aty-alert>
        <aty-alert type="error" show-icon>An error prompt
          <span slot="desc">
            Custom error description copywriting. <Icon type="help-circled" size="14" />
          </span>
        </aty-alert>
        <aty-alert show-icon>
          Custom icon
          <aty-icon type="ios-lightbulb-outline" slot="icon" />
          <template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
        </aty-alert>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-alert】 可关闭 </aty-title>
        <aty-alert show-icon closable>An info prompt</aty-alert>
        <aty-alert type="success" closable>A success prompt
          <span slot="close">No longer prompt</span>
        </aty-alert>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-alert】 顶部公告 </aty-title>
        <aty-alert banner type="success">Notice: notification contents...</aty-alert>
        <aty-alert banner closable type="warning">Notice: notification contents...</aty-alert>
      </aty-row>
    </aty-row>

  </div>
</template>
<script>
export default {
  //  components: { Alert, Icon }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-alert-box {
        margin: 20px;
        text-align: left;
    }
</style>
